<template>
	<div>
		<div class="m-order-detail ui-flex">
			<div class="order-info">
				<div class="order-title">订单信息</div>
				<ui-text-line label="订单编号：">
					<span>{{ orderInfo.order_sn }}</span>
					<Tooltip content="Right Center text" placement="right">
		                <Icon type="md-help-circle" :size="14" color="#485865" />
		                <div slot="content">
		                	<p>子订单号：{{ orderInfo.sub_sn }}</p>
		                	<p>支付流水号：200210110525000080</p>
		                </div>
		            </Tooltip>
				</ui-text-line>
				<ui-text-line label="订单类型：" value="线上订单(微信订单)"></ui-text-line>
				<ui-text-line label="付款方式：" value="微信支付"></ui-text-line>
				<ui-text-line label="买家：">
					<span class="ui-text-primary">{{ orderInfo.buyer.username }}</span>
				</ui-text-line>
				
				<div class="ui-divider ui-divider-dashed"></div>
				
				<ui-text-line label="配送方式：">
					<span>{{ orderInfo.order.address_type_text }}</span>
					<a style="float: right;" @click="showModifyOrderModal = true">修改订单</a>
				</ui-text-line>
				<ui-text-line label="收货信息：">{{ orderInfo.order.address_detail }}，{{ orderInfo.order.address_name }}， {{ orderInfo.order.address_mobile }}</ui-text-line>
				<ui-text-line label="买家留言：">{{ orderInfo.order.remark || '--' }}</ui-text-line>
			</div>
			<div class="order-info" style="background-color: #fafafa;">
				<div class="order-title">售后信息</div>
				<ui-text-line label="售后方式：">
					<ui-price :value="orderInfo.type_text"></ui-price>
				</ui-text-line>
				<ui-text-line label="退款金额：">
					<span class="ui-text-error">{{ orderInfo.refund_money }}</span>
				</ui-text-line>
				<ui-text-line label="退款原因：" :value="orderInfo.cause"></ui-text-line>
				<ui-text-line label="售后编号：" :value="orderInfo.sn"></ui-text-line>
				<ui-text-line label="申请时间：" :value="orderInfo.create_time"></ui-text-line>
				
				<div class="ui-divider ui-divider-dashed"></div>
				
				<ui-text-line label="应付金额：" :value="orderInfo.real_money"></ui-text-line>
				<ui-text-line label="可退金额：" :value="orderInfo.may_money"></ui-text-line>
				<ui-text-line label="付款时间：" :value="orderInfo.pay_time || '--'"></ui-text-line>
			</div>
			<div class="order-status ui-flex-full">
				<div class="order-title">
					<span>订单状态：{{ orderInfo.status_text }}</span>
					<span class="ui-text-gray">(买家已付款，请尽快发货，否则买家有权申请退款)</span>
					<!--<span class="ui-text-gray">退款中 (商家已同意退款，等待买家退货，收货后请确认收货完成售后)</span>-->
				</div>
				<Steps :current="handleGetStepStatus(orderInfo.status)">
			        <Step title="申请售后"></Step>
			        <Step title="商家同意"></Step>
			        <Step title="买家退货"></Step>
			        <Step title="售后完成"></Step>
			    </Steps>
			    <div class="ui-divider ui-divider-dashed" style="margin: 20px 0;"></div>
				<div style="max-height: 158px; overflow: hidden; overflow-y: auto;">
					<div class="ui-text-line" v-for="(item, index) in orderInfo.logs" :class="{'ui-text-primary': index == 0}" :key="item.id">
						<span>- </span>
						<span class="ui-flex-full">{{ item.create_time }} {{ item.desc }}</span>
					</div>
				</div>
			</div>
		</div>
		<Table :columns="columns" :data="skus">
			<div class="ui-table-cell ui-flex" slot-scope="{ row }" slot="goods">
	    		<ImageCell :src="'https://xzcustomer.cdn.bcebos.com/' + row.thumb"></ImageCell>
	            <div class="ui-flex-full" style="margin-left: 10px;">
	            	<p class="ui-ellipsis2">{{ row.sku_name }}</p>
	            	<p class="ui-ellipsis ui-text-primary">{{ handleGetSpecText(row.sku_spec) }}</p>
	            </div>
	        </div>
	        <div class="ui-table-cell" slot-scope="{ row }" slot="info">
        		<p class="ui-table-cell-line ui-ellipsis">货号：{{ row.sku_sn }}</p>
            	<p class="ui-table-cell-line ui-ellipsis">条码：{{ row.sku_barcode }}</p>
	        </div>
	        <div class="ui-table-cell" slot-scope="{ row }" slot="price_number">
        		<p class="ui-table-cell-line ui-ellipsis">单价：{{ row.sku_price }}</p>
            	<p class="ui-table-cell-line ui-ellipsis">数量：{{ row.number }}</p>
	        </div>
	        <div class="ui-table-cell" slot-scope="{ row }" slot="discount_total">
        		<p class="ui-table-cell-line ui-ellipsis">可退：{{ row.may_money }}</p>
            	<p class="ui-table-cell-line ui-ellipsis">退款：{{ row.money }}</p>
	        </div>
	        <div class="ui-table-cell" slot-scope="{ row }" slot="refund">
	        	<span class="ui-text-primary">买家已退货</span>
	        </div>
	        <div class="ui-table-cell" slot-scope="{ row }" slot="promotion">
	        	<Button type="warning" size="small">查看活动</Button>
	        </div>
	        <div class="ui-table-cell" slot-scope="{ row }" slot="status">
	        	<Button type="primary" size="small" :disabled="!row.status">{{ row.status ? '查看物流' : '暂未发货' }}</Button>
	        </div>
		</Table>
		<FooterBar>
			<div style="text-align: center;">
				<Button @click="handleBack">返回列表</Button>
				<template>
					<Button type="success" @click="showModifyPriceModal = true">修改价格</Button>
					<Button type="primary" @click="handleCancelOrder">取消订单</Button>
				</template>
				<Button type="primary" @click="showDeliveryModal = true">立即发货</Button>
			</div>
		</FooterBar>
		
		<!-- 确认发货弹窗 -->
		<Modal
			v-model="showDeliveryModal"
			title="确认发货"
			:width="1030"
		>
			<div class="ui-flex order-delivery-modal">
				<div class="order-delivery-form">
					<Form label-position="top">
						<FormItem label="发货方式">
							<RadioGroup>
						        <Radio label="快递发货"></Radio>
						        <Radio label="无需物流"></Radio>
						    </RadioGroup>
						</FormItem>
						<FormItem label="选择物流">
							<Select placeholder="请选择物流公司">
						        <Option value="1">中通</Option>
						    </Select>
						</FormItem>
						<FormItem label="物流单号">
							<Input placeholder="请输入订单物流单号(其他时选填)" />
						</FormItem>
						<FormItem label="订单发货备注">
							<Input type="textarea" :rows="5" placeholder="请填写订单发货备注" />
						</FormItem>
						<p class="ui-text-primary">请仔细填写物流公司及快递单号，发货后72小时 内仅支持做一次更正，逾期不可修改</p>
					</Form>
				</div>
				<div class="ui-flex-full">
					<Table :columns="deliveryColumns" :data="skus" :maxHeight="442">
						<div class="ui-table-cell ui-flex" slot-scope="{ row }" slot="goods">
				    		<ImageCell :src="row.thumb"></ImageCell>
				            <div class="ui-flex-full" style="margin-left: 10px;">
				            	<p class="ui-ellipsis2">{{ row.name }}</p>
				            	<p class="ui-ellipsis ui-text-primary">{{ row.spec }}</p>
				            </div>
				        </div>
				        <div class="ui-table-cell" slot-scope="{ row }" slot="price_status">
			        		<p class="ui-table-cell-line ui-ellipsis">价格：<ui-price>{{ row.price }}</ui-price></p>
			            	<p class="ui-table-cell-line ui-ellipsis">状态：未发货</p>
				        </div>
				        <div class="ui-table-cell" slot-scope="{ row }" slot="action">
				        	<InputNumber />
				        </div>
					</Table>
				</div>
			</div>
			<div slot="footer">
				<Button @click="showDeliveryModal = false">取消</Button>
				<Button type="primary" @click="showDeliveryModal = false">确定</Button>
			</div>
		</Modal>
		
		<!-- 修改价格弹窗 -->
		<Modal
			v-model="showModifyPriceModal"
			title="修改价格"
			:width="525"
		>
			<div class="order-modify-price-form">
				<Form :model="modifyPriceForm" style="font-size: 14px;">
					<Row :gutter="30" style="margin-bottom: 15px; text-align: center;">
						<Col span="6">应付订单金额</Col>
						<Col span="6">折扣(%)</Col>
						<Col span="6">运费</Col>
						<Col span="6">实付订单金额</Col>
					</Row>
					<Row :gutter="30" style="margin-bottom: 15px;">
						<Col span="6">
							<Input disabled :value="orderInfo.real_price"></Input>
						</Col>
						<Col span="6">
							<InputNumber
								v-model="modifyPriceForm.discount"
								:min="0"
								:max="100"
								:precision="0"
								style="width: 100%;"
								@on-change="handleCalculateDiscountPrice"
							></InputNumber>
						</Col>
						<Col span="6">
							<InputNumber
								v-model="modifyPriceForm.freight"
								:min="0"
								:precision="2"
								:formatter="value => `+ ${value}`"
            					:parser="value => value.replace(/\+\s?/, '')"
								style="width: 100%;"
								@on-change="handleCalculateDiscountPrice"
							></InputNumber>
						</Col>
						<Col span="6">
							<InputNumber v-model="modifyPriceForm.total" :min="0" :precision="2" style="width: 100%;"></InputNumber>
						</Col>
					</Row>
					<p>只有订单在未付款时才支持改价，改价后请联系买家刷新订单金额后再付款</p>
				</Form>
				<p class="ui-text-primary">实付订单金额 = ( 应付订单金额 x 折扣 ) + 运费</p>
			</div>
			<div slot="footer">
				<Button @click="showModifyPriceModal = false">取消</Button>
				<Button type="primary" @click="showModifyPriceModal = false">确定</Button>
			</div>
		</Modal>
		
		<!-- 修改订单弹窗 -->
		<Modal
			v-model="showModifyOrderModal"
			title="修改订单"
			:width="420"
		>
			<div>
				<Alert type="warning">仅支持修改一次，请务必在买家知情且同意下修改订单信息</Alert>
				<Form label-position="top">
					<FormItem label="配送方式">
						<RadioGroup>
					        <Radio label="普通快递"></Radio>
					        <Radio label="同城配送"></Radio>
					        <Radio label="门店自提"></Radio>
					    </RadioGroup>
					</FormItem>
					<FormItem label="收货地区">
						<Cascader :data="areas"></Cascader>
					</FormItem>
					<FormItem label="详细地址">
						<Input type="textarea" :rows="5" placeholder="请输入详细地址" />
					</FormItem>
					<FormItem label="收货人">
						<Input placeholder="请填写收货人" />
					</FormItem>
					<FormItem label="收货人电话">
						<Input placeholder="请填写收货人电话" />
					</FormItem>
				</Form>
			</div>
			<div slot="footer">
				<Button @click="showModifyOrderModal = false">取消</Button>
				<Button type="primary" @click="showModifyOrderModal = false">确定</Button>
			</div>
		</Modal>
		
	</div>
</template>

<script>
import Util from '@/libs/util.js';
import Tools from '@/libs/tools.js';
import ImageCell from '@/components/ImageCell/index.vue';
import InputAmount from '@/components/form/InputAmount.vue';
import FooterBar from '@/components/FooterBar.vue';
import DrawerForm from '@/components/DrawerForm.vue';
export default {
	name: 'order_detail',
	components: {
		ImageCell,
		InputAmount,
		FooterBar,
		DrawerForm
	},
	data() {
		return {
			committing: false,
			showDeliveryModal: false,
			showModifyPriceModal: false,
			showModifyOrderModal: false,
			skus: [],
			orderInfo: {
				buyer: {},
				order: {}
			},
			columns: [
				{
					title: '商品',
					slot: 'goods'
				},
				{
					title: '货号&条码',
					slot: 'info',
					maxWidth: 240
				},
				{
					title: '价格&售后数量',
					slot: 'price_number',
					maxWidth: 240
				},
				{
					title: '退款&可退金额',
					slot: 'discount_total',
					maxWidth: 240
				},
				{
					title: '退款状态',
					slot: 'refund',
					align: 'center',
					width: 130
				},
				{
					title: '参与活动',
					slot: 'promotion',
					align: 'center',
					width: 130
				},
				{
					title: '状态',
					slot: 'status',
					align: 'center',
					width: 200
				}
			],
			deliveryColumns: [
				{
                    type: 'selection',
                    width: 54,
                    align: 'center'
                },
				{
					title: '商品',
					slot: 'goods'
				},
				{
					title: '价格&状态',
					slot: 'price_status',
					width: 170
				},
				{
					title: '发货数量',
					slot: 'action',
					width: 120
				}
			],
			modifyPriceForm: {
				discount: 100,
				freight: 0,
				total: 0
			}
		}
	},
	computed: {
		areas () {
            return this.$store.state.app.areas;
        }
	},
	mounted() {
		if(this.$route.query.sn) {
			this.init(this.$route.query.sn);
		}
	},
	methods: {
		init(sn) {
			Util.ajax.post(this.API['API_ORDER_SALE_DETAIL'], {sn: sn, relations: ['order', 'order_sub', 'buyer', 'server_sku', 'logs']}).then((res) => {
				this.skus = res.server_sku.map(item => {
					/*item.discound_money = Tools.getPreciseNumber(item.sku_price, item.real_price, 'subtract');
					item.discound_money = item.discound_money.toFixed(2);
					item.total = Tools.getPreciseNumber(item.real_price, item.buy_nums, 'multiply');
					item.total = item.total.toFixed(2);*/
					return item;
				});
				res.logs = res.logs.reverse();
				this.orderInfo = res;
			}).catch(() => {
				
			})
		},
		// 获取步骤状态
		handleGetStepStatus(status) {
			if(status == 1) {
				return 0;
			}else if(status > 1 && status <= 3) {
				return 1;
			}else if(status > 4 && status <= 7) {
				return 2;
			}else if(status > 7) {
				return 3;
			}else{
				return -1;
			}
		},
		handleGetSpecText(spec) {
			if(!spec) return '';
			if(Array.isArray(spec)) {
				let texts = spec.map(item => {
					return item.name +':'+ item.value;
				})
				return texts.join(',');
			}else{
				return spec.name +':'+ spec.value;
			}
		},
		// 取消订单
		handleCancelOrder() {
			let reason = '';
			this.$Modal.confirm({
				title: '取消订单',
                render: (h) => {
                    return h('Input', {
                        props: {
                        	type: 'textarea',
                        	rows: 5,
                            autofocus: true,
                            placeholder: '请填写取消订单的原因'
                        },
                        style: {
                        	marginTop: '10px'
                        },
                        on: {
                            input: (val) => {
                                reason = val;
                            }
                        }
                    })
                },
                onOk: () => {
                	if(!reason) {
                		this.$Message.error('请输入取消订单的原因');
                	}
                }
            })
		},
		// 修改计算价格
		handleCalculateDiscountPrice() {
			let price = Tools.getPreciseNumber(this.orderInfo.real_price, this.modifyPriceForm.discount / 100, 'multiply');
			price = Tools.getPreciseNumber(price, this.modifyPriceForm.freight, 'add');
			this.modifyPriceForm.total = price;
		},
		handleBack() {
			this.$router.back();
		},
		handleSubmit() {
			
		}
	}
}
</script>

<style lang="less">
@import '../../../../styles/order-detail.less';
</style>